<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { RuleForm } from './types';
import type { FormInstance, FormRules } from 'element-plus';
import { userAsync } from '@/utils/users-api';

const ruleFormRef = ref<FormInstance>();
const loading = ref<boolean>(false);
const formLabelAlign = reactive<RuleForm>({
  userName: '',
  name: '',
  surname: '',
  email: '',
  phoneNumber: '',
  isActive: true,
  lockoutEnabled: true,
  roleNames: [],
  password: ''
});
const roleNamesOption = reactive<string[]>(['OPN', 'PE', 'ME', 'admin']);

const validateEmail = (rule, value, callback) => {
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (value === '') {
    callback(new Error('请输入电子邮箱'));
  } else if (!emailRegex.test(formLabelAlign.email)) {
    callback(new Error('请输入正确格式电子邮箱'));
  } else {
    callback();
  }
};

const validatePhone = (rule, value, callback) => {
  const PhoneRegex = /^1[345678]\d{9}$/g;
  if (value === '') {
    callback(new Error('请输入手机号'));
  } else if (!PhoneRegex.test(formLabelAlign.phoneNumber)) {
    callback(new Error('无效手机号'));
  } else {
    callback();
  }
};

const rules = reactive<FormRules<RuleForm>>({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓', trigger: 'blur' }],
  surname: [{ required: true, message: '请输入名', trigger: 'blur' }],
  roleNames: [{ required: true, message: '请选择角色名称', trigger: 'blur' }],
  phoneNumber: [{ required: true, validator: validatePhone, trigger: 'blur' }],
  email: [{ required: true, validator: validateEmail, trigger: 'blur' }]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  loading.value = true;
  try {
    await formEl.validate();
    const resp = await userAsync(formLabelAlign).finally(() => {
      loading.value = false;
    });
  } catch (error) {
    loading.value = false;
  }
};
</script>
<template>
  <div class="container">
    <div class="container-main">
      <div class="title">用户注册</div>
      <div class="main-form">
        <el-form
          class="users-form"
          ref="ruleFormRef"
          label-position="right"
          label-width="120px"
          :model="formLabelAlign"
          :rules="rules"
        >
          <el-form-item label="用户名：" prop="userName">
            <el-input clearable v-model="formLabelAlign.userName" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="姓：" prop="name">
            <el-input clearable v-model="formLabelAlign.name" placeholder="请输入姓" />
          </el-form-item>
          <el-form-item label="名：" prop="surname">
            <el-input clearable v-model="formLabelAlign.surname" placeholder="请输入名" />
          </el-form-item>
          <el-form-item label="电子邮箱：" prop="email">
            <el-input clearable v-model="formLabelAlign.email" placeholder="请输入电子邮箱" />
          </el-form-item>
          <el-form-item label="手机号：" prop="phoneNumber">
            <el-input clearable v-model="formLabelAlign.phoneNumber" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="角色名称：" prop="roleNames">
            <el-select
              v-model="formLabelAlign.roleNames"
              multiple
              collapse-tags
              placeholder="请选择角色名称"
            >
              <el-option
                v-for="item in roleNamesOption"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input
              show-password
              type="password"
              v-model="formLabelAlign.password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <!-- <el-form-item label="再次输入密码：" prop="password">
            <el-input show-password type="password" v-model="formLabelAlign.password" />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .container-main {
    width: 100%;
    height: 100%;
    padding-top: 1%;
    .title {
      font-size: 26px;
      font-weight: 800;
      text-align: center;
    }
    .main-form {
      display: flex;
      justify-content: center;
      margin-top: 3%;
      .users-form {
        width: 30%;
      }
      :deep(.el-form-item){
        margin-bottom: 36px;
      }
    }
  }
}
</style>
